import { IGetModelGetRes, getModelGet, postModelEnabledPage } from '@/api';
import { MciEmpty, MciSelect, MciSubCard, MciTable, MciTableColumn } from '@/components/base';
import { IOption } from '@/components/base/Select';
import { useCurrentNode } from '@/hooks/useCurrentNode';
import { useDictStore } from '@/store/dict';
import { TVariables } from '@/utils/graph';

export const ModelConfig = defineComponent({
  name: 'ModelConfig',
  setup() {
    const dictStore = useDictStore();
    const value = ref<string>('');
    const options = ref<IOption[]>([]);
    const currNodeVariablesReq = ref<TVariables[]>([]);
    const currNodeVariablesRes = ref<TVariables[]>([]);
    const currentNode = useCurrentNode();
    const loading = ref(false);

    const getModelResponse = async (id: string) => {
      let variables: IGetModelGetRes['variables'] = [];
      loading.value = true;
      const res = await getModelGet({ id });
      variables = res.variables || [];
      loading.value = false;
      currNodeVariablesReq.value = variables?.filter((item) => item.scope === 'REQUEST') || [];
      currNodeVariablesRes.value = variables?.filter((item) => item.scope === 'RESPONSE') || [];
      currentNode.saveCurrentPrivateNodeVariables(variables);
    };

    onMounted(async () => {
      const data = currentNode.getNodeData();
      const res = await postModelEnabledPage({ pageNo: 1, pageSize: 100 });
      const modelOptions =
        res?.list?.map((item: any) => {
          return {
            value: item.id,
            label: item.modelName
          };
        }) || [];

      if (data?.actionId) {
        value.value = data.actionId;
        getModelResponse(data.actionId);
      }

      options.value = modelOptions;
    });

    return () => {
      return (
        <MciSubCard title="加载设置">
          <MciSelect
            class="w-full"
            filterable
            v-model={value.value}
            list={options.value}
            onChange={(val) => {
              getModelResponse(val);
              currentNode.setData({
                actionId: val
              });
            }}
          />
          {currNodeVariablesReq.value.length > 0 && (
            <div class="py-16">
              {<div class="text-value-14 mt-12">模型入参</div>}
              <MciTable data={currNodeVariablesReq.value}>
                <MciTableColumn label="参数名称" prop="varName" />
                <MciTableColumn label="字段Key" prop="varLabel" />
                <MciTableColumn label="类型" prop="varType">
                  {(scope: any) => (
                    <>
                      <p>{dictStore.fieldTypeMap[scope.row.varType!]}</p>
                    </>
                  )}
                </MciTableColumn>
                <MciTableColumn label="默认值" prop="initValue" />
              </MciTable>
            </div>
          )}
          {currNodeVariablesRes.value.length > 0 && (
            <div class="mb-20 py-16">
              {<div class="text-value-14_bold">模型返回字段</div>}
              <MciTable data={currNodeVariablesRes.value}>
                <MciTableColumn label="字段名称" prop="varName" />
                <MciTableColumn label="字段解释" prop="varLabel" />
                <MciTableColumn label="类型" prop="varType">
                  {(scope: any) => (
                    <>
                      <p>{dictStore.fieldTypeMap[scope.row.varType!]}</p>
                    </>
                  )}
                </MciTableColumn>
              </MciTable>
            </div>
          )}
          {currNodeVariablesReq.value.length <= 0 && currNodeVariablesRes.value.length <= 0 && (
            <div class="custom-empty my-24">
              <MciEmpty tipText={'暂无数据'} />
            </div>
          )}
        </MciSubCard>
      );
    };
  }
});
